<template>
  <el-dialog
    class="common-dialog-box"
    :title="title"
    :visible.sync="dialogVisible"
    :width="popConfig.width||'50%'"
    :append-to-body="true"
    :destroy-on-close="popConfig.destroy"
    :before-close="handleClose"
    :close-on-click-modal="!!popConfig.closeOnClickModal"
  >
    <div class="common-dialog-main" :style="{'max-height': popConfig.maxHeight||'50vh', overflow: popConfig.overflow||'initial'}">
      <slot />
    </div>
    <span v-if="!popConfig.hideFooterBtn" slot="footer" class="dialog-footer">
      <el-button size="small" @click="handlerCancel">{{ popConfig.footerCancelBtnName||'取消' }}</el-button>
      <el-button size="small" type="primary" @click="handlerConfirm">{{ popConfig.footerConfirmBtnName||'确认' }}</el-button>
    </span>
    <span v-if="popConfig.otherConfirms && hasFooterBtn()" slot="footer" class="dialog-footer">
      <el-button size="small" @click="handlerCancel">{{ popConfig.footerCancelBtnName||'取消' }}</el-button>
      <el-button size="small" type="primary" @click="handlerConfirm('noNeedSolve')">无需处理</el-button>
      <el-button size="small" type="primary" @click="handlerConfirm('resolved')">已解决</el-button>
    </span>
  </el-dialog>
</template>

<script>

export default {
  name: 'CommonDialog',
  props: {
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 显示状态
    visible: {
      type: Boolean,
      default: false
    },
    // 筛选参数
    selectParams: {
      type: Object,
      default: () => ({})
    },
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
    }
  },
  methods: {
    handleClose() {
      this.$emit('popClose', 'close')
    },
    handlerCancel() {
      this.$emit('popClose', 'cancel')
    },
    handlerConfirm(type) {
      this.$emit('popConfirm', type || 'confirm')
    },
    hasFooterBtn() {
      const { status } = this.popData
      const hiddenStatus = [5, 6, 1]
      console.log(status, hiddenStatus, hiddenStatus.indexOf(status))
      return hiddenStatus.indexOf(status) === -1
    }
  }
}
</script>

<style lang="scss" scoped>
.common-dialog-box {
  color: #333;

  ::v-deep .el-dialog__header {
    background-color: #f9f9f9;
  }

  ::v-deep .el-dialog__footer {
    padding: 10px 40px 40px;
  }
}
</style>
